
/**
 *  @type Logic Component
 *  @role 用于页面头部 head 中整体逻辑与UI集合[main]
 *  @createDate Mr.Liu on 2017.06.02.14:02
 */

import React from "react";
import Img1  from '../img/iconOld.png';
import Img2 from '../img/iconLiao.png';

import No_orders from '../img/No_orders.png';

export default class A extends React.Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    render() {
        let {data} = this.props;

        const Img = data.orderType == "1" ? Img1 : Img2;

        let productName = [];   // 储存头部中间商品信息 , 数组格式， 需分解;

        if(Array.isArray(data.orderGoodss)){        // 拆分orderGoodss[Array]中的productName[string]储存到productName变量
            productName = data.orderGoodss.map((item,index)=> item.productName);
        }

        return(
        data.orderType ?
            <div className="order_upDownStream_head">
                {/*不同类型显示不同背景颜色 --style*/}
                <div className="order_upDownStream_head_leftIcon" style={data.orderType != "1" ? {backgroundColor:"#35acdd"} : null}>
                    <img src={Img} alt=""/>
                </div>

                <div className="order_upDownStream_head_rightInfo">
                    <header className="order_upDownStream_infoHeader">
                        <div className="order_upDownStream_head_optionItem">
                            <span> 合同编号：</span>
                            <strong> {data.signedContract || "-"} </strong>
                        </div>
                        <div className="order_upDownStream_head_optionItem">
                            <span> 订单编号：</span>
                            <strong> {data.oid || "-"} </strong>
                        </div>
                    </header>

                    <section className="order_upDownStream_infoSection">
                        <p className="order_upDownStream_head_InfoDes">
                            {productName.length !== 0 ? productName.join(",") : "-"}
                        </p>
                        <div className="order_upDownStream_head_optionItem">
                            <span> 采购方：</span>
                            { data.partAName || "-"}
                        </div>
                    </section>

                    <footer className="order_upDownStream_infoHFooter">
                        <div className="order_upDownStream_head_footerItem">
                            <span> 采购金额 ：</span>
                            <strong className="order_upDownStream_head_price">
                                ￥{(data.account/100).toFixed(2) || "-"}
                            </strong>
                        </div>
                        <div className="order_upDownStream_head_footerItem">
                            <span> 采购数量 ：</span>
                            <strong className="order_upDownStream_head_num">
                                {data.orderGoodsNum || "-"}
                            </strong>
                        </div>
                    </footer>
                </div>
            </div>
            :   <div className="order_upDownStream_section_empty">
            <img src={No_orders} />
        </div>
    )
    }
}